<template>
  <div class="realTimeAlarm">
    <div class="data-box">
      <div class="breakdown">
        <div class="title">
          <div class="line"></div>
          <div class="text">故障报警</div>
        </div>
        <div class="cont">
          <div class="detail">
            <div class="left">
              <div class="todays">
                <p class="num red">5</p>
                <p class="text">今日告警（条）</p>
              </div>
              <img src="~@/assets/images/realTimeAlarm/realTimeAlarm_pic1.png" alt="" class="pic">
            </div>
            <div class="right">
              <div class="proging">
                <p class="num red">5</p>
                <p class="text">发生中（条）</p>
              </div>
              <div class="end">
                <p class="num">0</p>
                <p class="text">已结束（条）</p>
              </div>
            </div>
          </div>
          <div class="detail">
            <div class="left">
              <div class="todays">
                <p class="num blue">2</p>
                <p class="text">电站总数（座）</p>
              </div>
              <img src="~@/assets/images/realTimeAlarm/realTimeAlarm_pic2.png" alt="" class="pic">
            </div>
            <div class="right">
              <div class="proging">
                <p class="num blue">1</p>
                <p class="text">当前告警（座）</p>
              </div>
              <div class="end">
                <p class="num">1</p>
                <p class="text">今日告警（座）</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-box">
        <div class="title">
          <div class="line"></div>
          <div class="text">今日新增报警统计</div>
        </div>
        <ECharts :option="newOptions" class="chart-cont" />
      </div>
      <div class="chart-box">
        <div class="title">
          <div class="line"></div>
          <div class="text">今日设备报警统计</div>
        </div>
        <ECharts :option="eqOptions" class="chart-cont" />
      </div>
      <div class="chart-box">
        <div class="title">
          <div class="line"></div>
          <div class="text">今日报警等级统计</div>
        </div>
        <ECharts :option="levelOptions" class="chart-cont" />
      </div>
    </div>
    <div class="warnBox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="报警" name="1">
          <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
            <el-form-item label="站点" prop="station">
              <el-select v-model="ruleForm.station" placeholder="请选择" clearable>
                <el-option label="全部" value="0"></el-option>
                <el-option label="广东省" value="1"></el-option>
                <el-option label="湖南省" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="ruleForm.deviceType" placeholder="请选择" clearable>
                <el-option label="全部" value="0"></el-option>
                <el-option label="光伏逆变器" value="1"></el-option>
                <el-option label="光伏组件" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报警等级" prop="alarmLevel">
              <el-select v-model="ruleForm.alarmLevel" placeholder="请选择" clearable>
                <el-option label="全部" value="0"></el-option>
                <el-option label="一级" value="1"></el-option>
                <el-option label="二级" value="2"></el-option>
                <el-option label="三级" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="ruleForm.status" placeholder="请选择" clearable>
                <el-option label="全部" value="0"></el-option>
                <el-option label="已处理" value="1"></el-option>
                <el-option label="未处理" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投运状态" prop="operationStatus">
              <el-select v-model="ruleForm.operationStatus" placeholder="请选择" clearable>
                <el-option label="全部" value="0"></el-option>
                <el-option label="已投运" value="1"></el-option>
                <el-option label="未投运" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
              <el-button @click="submitForm(ruleFormRef)">
                查询
              </el-button>
              <el-button type="primary" @click="transferOrder('all')">转工单</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="stationName" label="站点名称" show-overflow-tooltip width="300" />
            <el-table-column prop="deviceType" label="设备类型" />
            <el-table-column prop="deviceName" label="设备名称" />
            <el-table-column prop="alarmLevel" label="报警等级">
              <template #default="{ row }">
                <span v-if="row.alarmLevel === 0">未分级</span>
                <span v-else-if="row.alarmLevel === 1">一级</span>
                <span v-else-if="row.alarmLevel === 2">二级</span>
                <span v-else-if="row.alarmLevel === 3">三级</span>
              </template>
            </el-table-column>
            <el-table-column prop="alarmTitle" label="报警标题" />
            <el-table-column prop="originalAlarmTitle" label="原始报警标题" />
            <el-table-column prop="alarmTime" label="报警发生时间" />
            <el-table-column prop="alarmEndTime" label="报警结束时间" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <span v-if="row.status === 0" style="color: #C21F30;">发生中</span>
                <span v-else-if="row.status === 1" style="color: #86909C;">已结束</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button type="text" @click="transferOrder('alone')">转工单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="站点" name="2">站点</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import ECharts from '@/components/ECharts.vue';
import type { TabsPaneContext, FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus';
import router from '@/router';

const newOptions = ref(
  {
    grid: {
      left: '6%',
      right: '6%',
      top: '10%',
      bottom: '14%'
    },
    legend: {
      data: ['告警'],
      textStyle: {
        color: '#1D2129',
        fontSize: 14
      },
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 14,
      radius: 4,
      right: '6%',
      top: '4%'
    },
    xAxis: {
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
    },
    yAxis: [{
      type: 'value',
      name: '单位：告警/次',
      nameTextStyle: {
        color: '#1D2129',
        fontSize: 14,
        padding: [0, 0, 0, 30]
      },
      //不要圆点
      axisTick: {
        show: false
      },
      nameGap: 20,
      axisLabel: {
        color: '#1D2129'
      },
      axisLine: {
        lineStyle: {
          color: '#E5E6EA'
        }
      }
    }],
    series: [{
      name: '告警',
      type: 'line',
      data: [0, 0, 0, 0, 0],
      itemStyle: {
        color: '#046AF9'
      },
      lineStyle: {
        width: 5
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#CDE1FE' // 渐变起始颜色
            },
            {
              offset: 1,
              color: 'rgba(230, 240, 254, 0)' // 渐变结束颜色
            }
          ]
        }
      }
    }]
  }
)
const eqOptions = ref({
  legend: {
    bottom: '10%',
    right: '0'
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      label: {
        show: true,
        formatter: [
          '{d|{d}%}',
          '{b|{b}}'
        ].join('\n'),
        rich: {
          d: {
            fontSize: 20,
            lineHeight: 20,
            align: 'center'
          },
          b: {
            fontSize: 12,
            lineHeight: 20,
            align: 'center'
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 36, name: '站控设备' },
        { value: 10, name: 'PCS' },
        { value: 26, name: '空调' },
        { value: 28, name: 'BMS' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
const levelOptions = ref({
  legend: {
    bottom: '10%',
    right: '0'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'], // 环形图
      label: {
        show: true,
        formatter: [
          '{d|{d}%}',
          '{b|{b}}'
        ].join('\n'),
        rich: {
          d: {
            fontSize: 20,
            lineHeight: 20,
            align: 'center'
          },
          b: {
            fontSize: 12,
            lineHeight: 20,
            align: 'center'
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 36, name: '报警(B)' },
        { value: 10, name: '故障(A)' },
        { value: 26, name: '预警(C)' },
        { value: 28, name: '未分级' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

const activeName = ref('1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const tableData = ref([
  {
    stationName: '佛山明洋2号变(2500kVA)2322kWh26H',
    deviceType: '光伏逆变器',
    deviceName: '逆变器1',
    alarmLevel: 1, //一级
    alarmTitle: '逆变器1报警',
    originalAlarmTitle: '逆变器1报警',
    alarmTime: '2021-08-01 12:00:00',
    alarmEndTime: '2021-08-01 12:00:00',
    status: 0 //发生中
  },
  {
    stationName: '佛山明洋2号变(2500kVA)2322kWh26H',
    deviceType: '光伏逆变器',
    deviceName: '逆变器2',
    alarmLevel: 2, //二级
    alarmTitle: '逆变器2报警',
    originalAlarmTitle: '逆变器2报警',
    alarmTime: '2021-08-01 12:00:00',
    alarmEndTime: '2021-08-01 12:00:00',
    status: 1 //已结束
  },
  {
    stationName: '佛山明洋2号变(2500kVA)2322kWh26H',
    deviceType: '光伏逆变器',
    deviceName: '逆变器3',
    alarmLevel: 0, //未分级
    alarmTitle: '逆变器3报警',
    originalAlarmTitle: '逆变器3报警',
    alarmTime: '2021-08-01 12:00:00',
    alarmEndTime: '2021-08-01 12:00:00',
    status: 0
  }
])
const ruleFormRef = ref<FormInstance>()
//站点、设备类型、报警等级、状态、投运状态、时间
const ruleForm = reactive({
  station: '0',
  deviceType: '0',
  alarmLevel: '0',
  status: '0',
  operationStatus: '0'
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const transferOrder = (type: string) => {
  if (type === 'all') {
    if (multipleSelection.value.length === 0) {
      ElMessage.warning('请选择需要转工单的数据')
      return
    }
    router.push({
      path: '/operation/index',
      query: {
        ids: 1
      }
    })
  } else {
    router.push({
      path: '/operation/index',
      query: {
        ids: 1
      }
    })
  }
}
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
</script>

<style lang="scss" scoped>
.realTimeAlarm {

  .title {
    display: flex;
    align-items: center;
    height: 0.4rem;

    .line {
      width: 0.03rem;
      height: 0.16rem;
      background: #046AF9;
      margin-right: 0.08rem;
      margin-left: 0.16rem;
      border-radius: 0.04rem;
    }

    .text {
      font-size: 0.16rem;
      line-height: 0.24rem;
      color: #1D2129;
      font-weight: 500;
    }
  }

  .data-box {
    height: 5.04rem;
    display: flex;
    justify-content: space-between;

    .breakdown {
      width: 2.82rem;
      padding: 0 0.12rem 0.12rem;
      height: 100%;
      background: #fff;
      box-sizing: border-box;

      .cont {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100% - 0.4rem);

        .detail {
          height: 2.2rem;
          border-radius: 4px;
          padding: 0.12rem;
          background: url('~@/assets/images/realTimeAlarm/realTimeAlarm_bg.png'), linear-gradient(180deg, #FDE2E2 0%, #FFCFCF 100%);
          background-size: 100% 100%;
          display: flex;

          .left {
            flex: 1;

            .todays {
              text-align: center;

              .num {
                font-size: 0.5rem;
                line-height: 0.6rem;
                font-weight: 700;
              }

              .text {
                font-size: 0.14rem;
                line-height: 0.24rem;
                font-weight: 500;
                color: #1D2129;
              }
            }

            .pic {
              width: 1.06rem;
              height: 1.06rem;
              display: block;
              margin: 0.08rem auto 0;
            }
          }

          .right {
            padding: 0 0.12rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .proging,
            .end {
              text-align: center;
              background: rgba(255, 255, 255, 0.4);
              border-radius: 4px;
              border: 1px solid #fff;
              overflow: hidden;
              height: 0.94rem;

              .num {
                font-size: 0.4rem;
                line-height: 0.5rem;
                font-weight: 700;
                margin-top: 0.12rem;
              }

              .text {
                font-size: 0.12rem;
                line-height: 0.20rem;
                font-weight: 500;
                color: #1D2129;
              }
            }

            .end {
              .num {
                color: #323D4B;
              }
            }
          }

          .red {
            color: #C21F30;
          }

          .blue {
            color: #3944AA;
          }
        }

        .detail:last-child {
          background: url('~@/assets/images/realTimeAlarm/realTimeAlarm_bg.png'), linear-gradient(180deg, #E2F2FD 0%, #CFDCFF 100%);
          background-size: 100% 100%;
        }
      }
    }

    .chart-box {
      width: 4.38rem;
      height: 100%;
      background: #fff;
      box-sizing: border-box;

      .chart-cont {
        height: calc(100% - 0.4rem);
      }
    }
  }

  .warnBox {
    width: 100%;
    margin-top: 0.12rem;
    background: #fff;

    :deep(.el-tabs) {
      .el-tabs__nav-wrap:after {
        height: 1px;
      }

      .el-tabs__nav {
        padding: 0 0.16rem;
      }

      .el-tabs__header {
        height: 0.48rem;
        margin: 0;
      }

      .el-tabs__content {
        padding: 0 0.16rem;

        .conditions-form {
          display: flex;
          padding: 0.12rem 0;
          background: #fff;

          .el-form-item {
            margin-bottom: 0;
            margin-right: 0.4rem;

            .el-form-item__label {
              padding-right: 4px;
              height: 0.4rem;
              line-height: 0.4rem;
              font-size: 0.16rem;
            }

            .el-form-item__content {
              height: 0.4rem;

              .el-select__wrapper {
                width: 1rem;
                height: 0.4rem;
                font-size: 0.14rem;
              }

              .el-button {
                height: 0.4rem;
                line-height: 0.4rem;
                font-size: 0.14rem;
                color: #046AF9;
                border-color: #046AF9;
                background: #CDE1FE;
              }

              .el-button--primary {
                background: #046AF9;
                color: #fff;
              }

            }
          }

          .el-form-item:last-child {
            margin-left: auto;
            margin-right: 0;
          }
        }

      }
    }
  }
}
</style>
